<template>
<div class="content">
  <div style="background:#fff;">
    <Row>
    <Col span="4">
    <Menu :theme="theme3" active-key="1" style="width:100%">
      <Menu-group title="系统角色">
        <Menu-item v-bind:name="`${index+1}`" v-for="(item,index) in data1" v-bind:key="`${index+1}`">
          <span @click="getUserId(item.id)">
            {{item.roleName}}
          </span>
        </Menu-item>
      </Menu-group>
    </Menu>
    </Col>
    <Col span="20" class="box">
    <Tabs value="name1">
      <TabPane label="功能" name="name1">
        <Row>
          <Col span="24">
          <Button type="primary" @click="save()">保存</Button>
          </Col>
        </Row>
        <Row>
          <Col span="24">
          <Tree :data="data2" show-checkbox ref='tree'></Tree>
          </Col>
        </Row>
      </TabPane>
      <TabPane label="用户" name="name2">
        <Row>
          <Col span="24">
          <Button type="primary" @click="add()">新增</Button>
          </Col>
        </Row>
        <Row>
          <Col span="24">
          <Table border :columns="columns7" :data="data6"></Table>
          <Modal v-model="modal1" title="所有用户" width="80%" @on-ok="ok">
            <Row class="search">       
              <Col span="24">
                <div class="item">
                  <label>用户名</label>
                  <Input v-model="searchusername" placeholder="用户名" style="width: 200px"></Input>
                </div>
                <div class="item">
                  <label>用户类型</label>
                  <Select v-model="searchtype" style="width:200px">
                    <Option value="">所有用户</Option>
                    <Option value="1">中心用户</Option>
                    <Option value="2">管理部用户</Option>
                  </Select>
                </div>
                <Button type="primary" icon="ios-search" @click="add">查询</Button>
              </Col>
            </Row>
            <Table class="marginTop10" border :columns="columns8" :data="data8" height="400"></Table>
          </Modal>
          </Col>
        </Row>
      </TabPane>
    </Tabs>
    </Col>
  </Row>
  </div>
</div>

</template>
<script>
export default {
  data() {
    return {
      searchtype:'',
      searchusername:"",
      alltype:[
        {value:1},
        {value:2}
      ],
      modal1: false,
      columns7: [
        {
          title: "用户名",
          key: "username"
        },
        {
          title: "真实姓名",
          key: "realName"
        },
        {
          title: "手机号码",
          key: "mobile"
        },
        {
          title: "电话号码",
          key: "telephone"
        },
        {
          title: "电子邮箱",
          key: "email"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index, params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      columns8: [
        {
          title: "用户名",
          key: "username"
        },
        {
          title: "真实姓名",
          key: "realName"
        },
        {
          title: "用户类型",
          key: "usertype",
          align: "center",
          render: (h, params) => {
              let zt = params.row.usertype;
              if (zt == "1") {
                return h('span','中心用户')
              }else{
                return h('span',' 管理部用户')
              }
          },
          width: 100,
        },
        {
          title: "手机号码",
          key: "mobile"
        },
        {
          title: "电话号码",
          key: "telephone"
        },
        {
          title: "电子邮箱",
          key: "email"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            // const row = params.row;
            // const type = row.accountNonLocked === true ? 'error' : 'primary';
            // const text = row.accountNonLocked === true ? '添加' : '已添加';
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.sure(params.row.id);
                    }
                  }
                },
                "添加"
              )
            ]);
          }
        }
      ],
      data6: [],
      data8: [],
      theme3: "light",
      data1: {},
      modal1: false,
      data2: [],
      data3: [],
      roleId: "",
      result: {}
    };
  },
  mounted() {
    this.initData(); //初始化
    this.initData2();
  },
  methods: {
    initData() {
      this.$http
        .post("/api/auth/sysrole/doGetList") //角色管理--查询所有角色
        .then(res => {
          this.data1 = res.retBody;
        });
    },
    initData2() {
      const self = this;
      self.data2 = [];
      this.$http
        .post("/api/auth/sysfun/doGetFunctionList") //系统功能--查询所有功能
        .then(res => {
          let list = res.retBody;
          this.tree(list);
        });
    },
    getUserId(itemId) {
      //获取角色功能和用户
      this.getFunc(itemId);
      this.getRole(itemId);
    },
    getFunc(itemId) {
      const self = this;
      this.roleId = itemId;
      this.$http
        .post("/api/auth/sysfun/doGetFunctionListByRoleId", { roleId: itemId }) //系统功能--查询角色功能
        .then(res => {
          let power = res.retBody;
          this.$http.post("/api/auth/sysfun/doGetFunctionList").then(res => {
            let list = res.retBody;
            self.data2 = [];
            list.forEach(item => {
              item.expand = true;
              power.forEach(item1 => {
                if(item1.hasOwnProperty("functionUrl")){
                  if(item1.functionUrl != ""){
                    if (item.id == item1.id) {
                      item.checked = true;
                    }
                  }
                }
              
              });
            });
            this.tree(list);
          });
        });
    },
    getRole(itemId) {
      const self = this;
      this.$http
        .post("/api/auth/sysuser/doGetListWithRoleId", { roleId: itemId,pageSize:1000}) //用户管理--查询角色中的用户
        .then(res => {
          this.data6 = res.retBody.list;
        });
    },
    save() {
      const self = this;
      let node = this.$refs.tree.getCheckedNodes();
      console.log(node);
      let ids = "";
      let roleId = self.roleId;
      let data = this.$refs.tree.data;
      for (let i = 0, len = node.length; i < len; i++) {
        if (i != len - 1) {
          ids += node[i].id + ",";
        } else {
          ids += node[i].id;
        }
      }
      for (let item of data) {
        if (item.hasOwnProperty("indeterminate") == true) {
          var idsArr = ids.split(",");
          if (item.indeterminate == true) {
            ids += "," + item.id;
            //console.log(ids);
          }
        } 
      }

      self.$http                                                         //角色管理--添加功能
        .post("/api/auth/sysrole/doAddRoleFunction", {"roleId":roleId,"functionIds": ids})
        .then(res => {
          self.success()
        });
    },
    ok() {
      this.$Message.info("Clicked ok");
    },
    sure(userIds) {
      let roleId = this.roleId;
      this.$http //角色管理--添加角色中的用户
        .post("/api/auth/sysrole/doAddRoleUser", {
          roleId: roleId,
          userIds: userIds
        })
        .then(res => {
          this.success();
          this.getRole(this.roleId);
        });
    },
    remove(index, userIds) {
      let roleId = this.roleId;
      this.$http //角色管理--删除角色中的用户
        .post("/api/auth/sysrole/doDelRoleUser", {
          roleId: roleId,
          userIds: userIds
        })
        .then(res => {
          this.data6.splice(index, 1);
        });
    },
    add() {
      const self = this;
      self.$http
        .post("/api/auth/sysuser/doGetList",{
           pageSize:1000,
          username: this.searchusername,
          usertype: this.searchtype,
           }) //用户管理--查询所有用户
        .then(res => {
          self.data8 = res.retBody.list;
          self.modal1 = true;
        });
    },
    tree(cont) {
      //树结构循环
      const self = this;
      cont.forEach(function(item) {
        item.children = [];
        item.expand = true;
        if (item.parentId == 0) {
          self.data2.push(item);
          item.title = item.functionName;
          self.data2.forEach((item1, index1) => {
            cont.forEach(item2 => {
              if (item1.id == item2.parentId) {
                item2.title = item2.functionName;
                if (
                  item.hasOwnProperty("children") &&
                  item1.children.indexOf(item2) == -1
                ) {
                  item1.children.push(item2);
                }
                item1.children.forEach((item3, index2) => {
                  cont.forEach(item4 => {
                    if (item3.id == item4.parentId) {
                      item4.title = item4.functionName;
                      if (
                        item3.hasOwnProperty("children") &&
                        item3.children.indexOf(item4) == -1
                      ) {
                        item3.children.push(item4);
                      }
                    }
                  });
                });
              }
            });
          });
        }
      });
    },
    success() {
      this.$Message.success({
        content: "添加成功",
        duration: 3
      });
    }
  }
};
</script>
<style lang="scss" scoped>
    .search{
        margin-bottom: 10px;
        .item{
            margin-right: 10px;
            width: 280px;
            float: left;
        }
    }
.content_main {
    padding: 10px;

    label{
        font-size: 16px;
    }
}
</style>

